<template >
    <el-card style="max-width: 480px;margin-left: 330px;height: 480px;" class="a3">
        <template #header >  
           
                <span style="color: blue; font-size: 25px;">bug系统管理</span>
             
        </template>
            <span class="a2">用户名:4ukwk</span>
            <span class="a2">密码:abdecd1121112ddd</span><br>
     
           <el-input   :prefix-icon="User" v-model="name" style="width: 240px;height: 40px;" placeholder="请输入登录账号" class="a1" /><br>
            <el-input   :prefix-icon="Lock" show-password   v-model="pwd" style="width: 240px;height: 40px;" placeholder="请输入密码" class="a5" /><br>
            <el-input   :prefix-icon="Message"  v-model="email" style="width: 240px;height: 40px;" placeholder="请输入email" class="a5" /><br>
            <el-checkbox v-model="checked1" label="保存登录" size="large"  />
            <el-button type="primary" text class="a4">忘记密码？</el-button><br>
        <el-button type="primary" style="width: 280px;height: 40px; margin-top: 15px;" round @click="dialogFormVisible = true">立即登录</el-button>
      </el-card>

      <el-dialog v-model="dialogFormVisible" title="Shipping address" width="500">
        <div>
          <p>"shifou quren shanchu "</p>
        </div>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消登录</el-button>
        <el-button type="primary" @click="flag=true,login()">
          确认登录
        </el-button>
      </div>
    </el-dialog>
     
    </template>
     
    <script setup>
    import { ref, onMounted, onUnmounted } from 'vue';
    import axios from 'axios';
    import {User,Lock,Hide, Message} from '@element-plus/icons-vue'
    import { useRouter } from 'vue-router';

    // import { Message } from 'element-ui'
    var name=ref('')
    var pwd =ref('')
    var email = ref('')
    var router= useRouter()
    let dialogFormVisible = ref(false)
    let flag =ref(false)
    let loginto = ref()

  var from = ref({
    name:name,
    password:pwd,
  })
  
    onMounted(() => {
        
    });
     
    // 在组件卸载前执行的操作
    onUnmounted(() => {
        // Your code here
    });
  
  
  function login(){

    if(flag.value){
      // close 对话框
      dialogFormVisible.value = false
      axios.post('http://127.0.0.1:8000/test/login/',from.value)
    .then(res => {
        if(res.data.code != 200){
          alert(res.data.msg)
        }else{
          console.log("看看res.data信息:", res.data)
          console.log("看看token信息:", res.data.token)
        localStorage.setItem('Token',res.data.token)
        
        router.push('/employeelist')
        }})
      .catch(err => {
      console.error(err); 
     })
    }
  
  }
  
  
    </script>
    <style>
    .a6{
        width: 1660px;
        height: 500px;
        background-color: aqua;
    }
    .a1{
    margin-top: 20px;
     
     
    }
    .a2{
     
        font-size: 14px;
        color: #7ea5bf;
       
    }
    .a3{
        text-align: center;
        margin-top: 200px;
        
         
    }
  .a5{
    margin-bottom: 20px;
    margin-top: 20px;
  }
  .a4{
  margin-left: 120px;
  }
     
    </style>